<template>
    <div class="cont">
        <div class="text-2xl ml-4">取消订单配置</div>
        <CustomForm @submit="submit" :formList="formList"></CustomForm>
    </div>
</template>

<script setup lang="ts">
import CustomForm from '@/components/customForm/CustomForm.vue';
import { CustomFormItem, CustomFormState } from '@/components/customForm/types';

const formList = reactive<CustomFormItem[]>([
    {label: '用户取消配置',key: 'userCancelsConfiguration',type:'free',children:[],subItemType:'range',tip:'用户在订单状态为【已接单、配送中】时取消订单会触发此规则'},
    {label: '骑手取消订单规则',key: 'ridersCancelOrderRules',type:'free',children:[],subItemType:'range',tip:'骑手在订单状态为【已接单、配送中】时取消订单会触发此规则'},
    {label: '用户取消订单项配置',key: 'userCancelsOrderItemConfiguration',type:'free',children:[],subItemType:'input'},
    {label: '骑手取消订单选项配置',key: 'riderCancellationOrderOptionConfiguration',type:'free',children:[],subItemType:'input'},
    {label: '管理员取消订单配置',key: 'administratorCancelsOrderConfiguration',type:'free',children:[],subItemType:'input'},
    {value: '提交并保存',key:'submit',type: 'submit'}
])

const submit = (formState: CustomFormState) => {
    alert('表单结果为' + JSON.stringify(formState))
}
</script>

<style scoped>

</style>